<template>
	<view class="content">
		<!-- 头部 -->
		<view class="head_box">
			<view class="l_box">
				<image src="https://www.dingxians.cn/upload/20240801/66ab26d57079d.png" mode="scaleToFill" />
			</view>
			<view class="r_box">
				在线开盒 | 正品保障 | 100%中奖
			</view>
		</view>

		<my-welfare-tab :tab-list="['盲盒', '福利屋', '攀登高峰', '融合']" v-model="tabPosition"></my-welfare-tab>


		<my-tab v-model="status" :tab-list="tabData"></my-tab>
		<view class="all_action" v-if="orderData.length > 0">
			<view class="all_action_left">
				<view class="action_title">批量操作</view>
			</view>
			<view class="all_action_right">
				<view class="action_btn exchange"
					@click="header(`/pages/box/exchangeList?type=` + tabPosition, 1, true)">
				</view>
				<view class="action_btn take" @click="navigateTake()"></view>
				<view class="action_btn give" @click="header(`/pages/box/giveList?type=` + tabPosition, 1, true)">
				</view>
			</view>
		</view>
		<scroll-view class="scroll" refresher-background="" :refresher-triggered="refreshStatus"
			@refresherrefresh="refresh" :refresher-enabled="true" scroll-y="true" @scrolltolower="lower">
			<empoy v-if="orderData.length == 0"></empoy>
			<view v-else class="box-item" v-for="(item, index) in orderData" :key="index" style="position: relative;"
				:style="{ backgroundImage: 'url(https://www.dingxians.cn/upload/00' + item.level_id + '.png)' }">
				<view class="goods-title" style="font-size:24rpx;position: absolute;top: 80rpx;">{{ item.blind_box_name
					}} [{{ item.resource }}]</view>
				<view class="time">{{ item.created_at }}</view>
				<view class="goods-info">
					<image class="goods-img" mode="widthFix" :src="item.blind_box_prize_image" />
					<view class="goods-content">
						<view class="goods-name">{{ item.blind_box_prize_name }}</view>
						<view class="goods-price">
							￥{{ item.price }}
							<text class="goods-num">X{{ item.num }}</text>
						</view>
						<view class="goods-recovery-price">拒提价：{{ item.recovery_price }}</view>
						<view class="goods-tips" v-if="!item.expired && item.status === 1">
							请在
							<text class="box_tip_time">{{ item.expired_at }}</text>
							前提货，过期将只能拒提
						</view>
						<view class="goods-tips timeout" v-if="item.expired">
							<view>已超时无法提货商品</view>
						</view>
						<view class="goods-tips" v-if="item.status === 2">赠送时间：{{ item.give_at }}</view>
						<view class="goods-tips" v-if="item.status === 3">拒提时间：{{ item.exchange_at }}</view>
						<view class="goods-tips" v-if="item.status === 4">反悔时间：{{ item.back_at }}</view>
						<view class="goods-tips" v-if="item.status === 5">提货时间：{{ item.updated_at }}</view>
					</view>
				</view>
				<!-- <view class="goods-bottom">
					
					
				</view> -->
			</view>
			<loadmore v-if="orderData.length > 0" mode="loading2" :status="loadStatus"></loadmore>
		</scroll-view>
		<uni-popup ref="popup" v-show="popStatus" :mask-click="false">
			<view class="pop_box">
				<view class="pop_header">抽到不想要的商品？赠送给想要的好朋友吧</view>

				<view class="user_info">
					<view class="give_search_box">
						<input class="user_id" v-model="giveParams.user_id" placeholder="请输入用户id" />
						<view class="give_search" @click="searchUser()">搜索</view>
					</view>
					<view class="search_user" v-if="giveParams.avatar">
						<image class="search_user_avatar" :src="giveParams.avatar"></image>
						<view class="search_user_info">
							<view class="search_user_id">用户ID:{{ giveParams.user_id }}</view>
							<view>用户昵称:{{ giveParams.nickname }}</view>
						</view>
					</view>
					<view class="give_tip">温馨提示：商品赠送后不可撤销</view>
					<view style="color: white; display: flex; padding: 20rpx 60rpx">
						<text>赠送数量：</text>
						<my-number-box v-model="giveParams.num" :max="giveParams.num" :min="1"></my-number-box>
					</view>
				</view>
				<textarea v-model="giveParams.remark" class="give_remark" placeholder="赠礼留言"></textarea>
			</view>
			<view class="give_btn_group">
				<view class="give_btn give_cancel" @click="cancel()">取消</view>
				<view class="give_btn give_confirm" @click="giveSubmit()">确定</view>
			</view>
		</uni-popup>



		<my-alert-dialog ref="backDialog" title="提示" content="确定要反悔嘛？" @confirm="handleBack"></my-alert-dialog>
	</view>
</template>


<script>
	import api from '../../api/index.js'
	import box from '@/mixins/box'
	import empoy from '../../components/empoy/empoy.vue'
	import loadmore from '../../components/a_loadMore/a_loadMore.vue'
	export default {
		components: {
			empoy,
			loadmore
		},
		mixins: [box],
		data() {
			return {
				loadStatus: 'normal', //加载状态down,loading,normal
				// 状态：1待处理2已赠送3已拒提4已反悔5提货中6已提货
				orderData: [],
				tabData: [{
						id: 1,
						title: '待处理'
					},
					{
						id: 3,
						title: '已拒提'
					},
					{
						id: 2,
						title: '已赠送'
					},
					/*{ id: 4, title: '已反悔' },*/
					{
						id: 5,
						title: '提货中'
					},
					{
						id: 6,
						title: '已提货'
					},
				],
				page: 1,
				last_page: 0,
				status: 1,
				resultStatus: false,
				refreshStatus: false,
				popStatus: false,
				giveParams: {
					prize_id: '',
					user_id: '',
					remark: '',
					avatar: '',
					nickname: '',
					num: 1,
				},
				top: 80,
				token: uni.getStorageSync('token'),

				version_no: '',
				showVersion: false,
				percentVal: 0,
				versionData: {},
				mask: true,
				downStatus: false,
				tabPosition: 0,
				tabList: ['盲盒', '福利屋'],
			}
		},
		onLoad() {},
		onShow() {
			this.token = uni.getStorageSync('token')
			if (this.token) {
				// this.getData(1)
				this.refresh()
			}
			this.percentVal = 0
			this.showVersion = false
			this.mask = true
			this.downStatus = false
		},
		watch: {
			tabPosition() {
				// 监听改变
				this.status = 1
				this.refresh()
			},
			status() {
				this.resultStatus = false
				this.page = 1
				if (!this.token) {
					return
				}
				this.getData(2)
			},
		},
		methods: {
			navigateTake() {
				this.header(`/pages/box/takeList?type=` + this.tabPosition, 1, true)
			},
			handleBack(item) {
				uni.showLoading({
					title: '抽奖中',
				})
				api.blindBoxOrderPrizes
					.back(item.id)
					.then((res) => {
						uni.hideLoading()
						if (res.code == 200) {
							let box_order_id = res.data.box_order_id
							let box_id = item.blind_box_id
							let pay_mode = 1
							this.header(
								`/pages/index/draw?box_order_id=${box_order_id}&box_id=${box_id}&pay_mode=${pay_mode}`
							)
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			backAction(item) {
				this.$refs.backDialog.show(item)
			},
			checkVersion() {
				let ua = uni.getSystemInfoSync().platform
				if (/ios/i.test(ua)) {
					this.type = 'ios'
				} else if (/android/i.test(ua)) {
					this.type = 'android'
				}
				uni.showLoading({
					title: '检查更新中',
				})
				api.versions
					.check({
						refresh: 1,
						type: this.type,
						version_no: this.version_no
					})
					.then((res) => {
						uni.hideLoading()
						if (res.code === 200) {
							this.versionData = res.data
							if (res.data.status == 0) {
								uni.setStorageSync('update_app', 0)
							} else {
								this.showVersion = true
								this.$refs.update_app.open('center')
								uni.setStorageSync('update_app', 1)
							}
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			searchUser() {
				uni.showLoading({
					title: '搜索用户~',
				})
				api.users
					.search(this.giveParams.user_id)
					.then((res) => {
						if (res.code === 200) {
							uni.hideLoading()
							this.giveParams.nickname = res.data.nickname
							this.giveParams.avatar = res.data.avatar
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			give(id, num) {
				this.popStatus = true
				this.giveParams.prize_id = id
				this.giveParams.num = num
				this.$refs.popup.open('center')
			},
			takeOne(id) {
				let ids = JSON.stringify([id])
				this.header(`/pages/box/order?ids=${ids}&type=` + this.tabPosition)
			},
			giveSubmit() {
				if (!this.giveParams.user_id) {
					this.show('请输入用户id')
					return
				}
				if (!this.giveParams.prize_id) {
					this.show('请选中赠送的商品')
					return
				}
				uni.showLoading({
					title: '赠送中~',
				})
				const params = {
					user_id: this.giveParams.user_id,
					id: this.giveParams.prize_id,
					remark: this.giveParams.remark,
				}
				let promise
				if (this.tabPosition === 0) {
					promise = api.blindBoxOrderPrizes.give({
						user_id: this.giveParams.user_id,
						params: this.giveParams.prize_id + ':' + this.giveParams.num,
						remark: this.giveParams.remark,
					})
				} else if (this.tabPosition === 1) {
					promise = api.welfareHouses.give(params)
				} else if (this.tabPosition === 2) {
					promise = api.towers.give(params)
				} else if (this.tabPosition === 3) {
					promise = api.compounds.give(params)
				}
				promise
					.then((res) => {
						uni.hideLoading()
						if (res.code === 200) {
							this.show('赠送成功')
							this.cancel()
							this.refresh()
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			cancel() {
				this.$refs.popup.close()
				this.popStatus = false
			},
			lower() {
				if (this.page >= this.last_page) {
					// this.show('没有更多数据了')
					this.loadStatus = "normal"
					return
				}
				this.page++
				this.getData(1)
			},
			refresh() {
				if (!this.token) {
					this.refreshStatus = false
					this.resultStatus = true
					return
				}

				if (!this.refreshStatus) {
					this.refreshStatus = true
					this.page = 1

					this.getData(2)
				}
			},
			/*
			 * type 1 加载更多 2 刷新
			 * */
			getData(type) {
				// uni.showLoading({
				// 	title: '数据加载中',
				// })
				this.loadStatus = 'loading'
				let promise
				if (this.tabPosition === 0) {
					promise = api.blindBoxOrderPrizes.index({
						page: this.page,
						status: this.status
					})
				} else if (this.tabPosition === 1) {
					promise = api.welfareHouses.order({
						page: this.page,
						status: this.status
					})
				} else if (this.tabPosition === 2) {
					promise = api.towers.order({
						page: this.page,
						status: this.status
					})
				} else if (this.tabPosition === 3) {
					promise = api.compounds.order({
						page: this.page,
						status: this.status
					})
				}
				promise
					.then((res) => {
						this.refreshStatus = false
						if (res.code === 200) {
							// uni.hideLoading()
							this.loadStatus = 'down'
							this.resultStatus = true
							if (type === 1) {
								this.orderData = this.orderData.concat(res.data.data)
							} else {
								this.loadStatus = 'normal'
								this.orderData = res.data.data
							}
							this.last_page = res.data.last_page
						}
					})
					.catch((error) => {
						this.refreshStatus = false
						console.log(error)
					})
			},
			exchange(id) {
				this.header(`/pages/box/exchange?id=${id}&type=` + this.tabPosition)
			},
			changeTab(id) {
				if (id !== this.status) {
					this.status = id
					this.resultStatus = false
					this.page = 1
					if (!this.token) {
						return
					}
					this.getData(2)
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #141414;
		height: 100vh;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding-top: 80rpx;

		// .header {
		// 	display: flex;
		// 	justify-content: space-between;
		// 	margin: 0 30rpx;

		// 	.header_title {
		// 		width: 100%;
		// 		text-align: center;
		// 		color: white;
		// 		font-size: 40rpx;
		// 		font-weight: bold;
		// 	}
		// }
		.head_box {
			width: 100%;
			height: 127rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 0 29rpx 0 10rpx;
			// margin-bottom: 23rpx;

			.l_box {
				width: 122rpx;
				height: 122rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.r_box {
				height: 23rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #fff;
				line-height: 23rpx;
			}
		}

		.tab-sub {
			display: flex;
			align-items: center;
			justify-content: space-around;
			height: 50rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 0 10rpx;

			.tab_item {
				width: 112rpx;
				height: 46rpx;
				line-height: 46rpx;
				text-align: center;
				margin: 0 10rpx;
				font-size: 26rpx;
				color: #808080;

				&.active {
					border: none;
					color: white;
					background: url('https://www.dingxians.cn/upload/images/box/tab-bg-active.png');
					background-size: 100% 100%;
				}
			}
		}

		.nav {
			color: black;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 500rpx;
			margin: 20rpx auto;
			border-radius: 20rpx;
			background-color: white;
			overflow: hidden;

			.nav-item {
				/*margin: 0 30rpx;*/
				width: 50%;
				text-align: center;
				box-sizing: border-box;
				padding: 5rpx 20rpx;

				&.active {
					background-color: orange;
					color: white;
				}
			}
		}

		.all_action {
			height: 86rpx;
			line-height: 86rpx;
			width: 710rpx;
			border-radius: 5rpx;
			font-size: 30rpx;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			padding-top: 16rpx;
			margin: 0 auto;

			.all_action_right {
				margin-right: 20rpx;
				color: #fff;
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.action_btn {
					margin-left: 18rpx;
					width: 110rpx;
					line-height: 46rpx;
					height: 46rpx;
					text-align: center;
					background-size: 100% 100%;

					&.take {
						background-image: url('https://www.dingxians.cn/upload/20240801/66ab1ef4d1a99.png');
					}

					&.exchange {
						background-image: url('https://www.dingxians.cn/upload/20240801/66ab1ef4d6494.png');
					}

					&.give {
						background-image: url('https://www.dingxians.cn/upload/20240801/66ab1ef4d666a.png');
					}
				}
			}

			.all_action_left {
				margin-left: 20rpx;
				display: flex;
				align-items: center;
				font-size: 26rpx;

				.action_title {
					font-weight: bold;
					color: white;
					margin-right: 20rpx;
				}

				.action_rule {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}

	.scroll {
		margin: 30rpx auto 0;
		/*left: 0;*/
		width: 100%;
		overflow-y: hidden;
		flex: 1;

		&::-webkit-scrollbar {
			display: none;
		}
	}

	.box-item {
		margin: 0 auto;
		width: 710rpx;
		height: 414rpx;
		background-size: 100% 100%;
		color: white;
		box-sizing: border-box;
		padding: 50rpx 50rpx;
		margin-bottom: 20rpx;

		.time {
			margin-top: 30rpx;
			font-size: 24rpx;
			text-align: right;
		}

		.goods-img {
			width: 160rpx;
			max-height: 160rpx;
			margin-left: 25rpx;
			margin-top: 45rpx;
		}

		.goods-info {
			display: flex;

			.goods-content {
				flex: 1;
				margin-left: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.goods-name {
					width: 400rpx;
					margin-top: 30rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 28rpx;
				}

				.goods-price {
					font-size: 40rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.goods-num {
						font-size: 24rpx;
					}
				}

				.goods-recovery-price {
					font-size: 22rpx;
				}

				.goods-tips {
					font-size: 22rpx;
				}

				.timeout {
					color: red;
				}
			}
		}
	}

	.pop_box {
		display: flex;
		flex-direction: column;
		background-image: url('https://www.dingxians.cn/upload/images/box/bg-give.png');
		background-size: 100% 100%;
		border-radius: 10rpx;
		width: 655rpx;
		height: 750rpx;

		.pop_header {
			font-size: 24rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			margin-top: 100rpx;
			color: white;
		}

		.user_info {
			display: flex;
			flex-direction: column;

			.give_search_box {
				display: flex;
				justify-content: center;
				font-size: 24rpx;
				margin: 0 auto;
				width: 542rpx;
				height: 80rpx;
				align-items: center;
				background-color: #141414;
				border: 1rpx solid #333122;
				border-radius: 2rpx;

				.user_id {
					flex: 1;
					border-radius: 10rpx;
					margin-right: 10rpx;
					padding: 0 24rpx;
					font-size: 24rpx;
					color: white;

					&::placeholder {
						color: #525252;
					}
				}

				.give_search {
					width: 112rpx;
					height: 52rpx;
					border-radius: 2rpx;
					background-color: #ded000;
					margin-right: 12rpx;
					text-align: center;
					line-height: 52rpx;
					font-weight: bold;
					color: #141414;
				}
			}

			.search_user {
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 20rpx 0 0;

				.search_user_avatar {
					border-radius: 50%;
					width: 80rpx;
					height: 80rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
				}

				.search_user_info {
					display: flex;
					height: 80rpx;
					flex-direction: column;
					justify-content: space-between;
					color: white;

					.search_user_id {
						color: red;
					}
				}
			}

			.give_tip {
				margin: 20rpx 0;
				font-size: 24rpx;
				color: red;
				text-align: center;
			}
		}

		.give_remark {
			margin: 0 auto;
			box-sizing: border-box;
			padding: 32rpx 24rpx;
			width: 542rpx;
			background-color: #141414;
			border: 1rpx solid #333122;
			border-radius: 2rpx;

			font-size: 24rpx;
			color: white;

			&::placeholder {
				color: #525252;
			}
		}
	}

	.give_btn_group {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 32rpx 30rpx 30rpx 30rpx;

		.give_btn {
			width: 228rpx;
			height: 84rpx;
			background-size: 100% 100%;
			text-align: center;
			line-height: 84rpx;
			border-radius: 10rpx;
			font-size: 30rpx;
			background-image: url(https://www.dingxians.cn/upload/images/common/btn-primary-small.png);
			color: #fff;

			&.give_cancel {
				filter: grayscale(1);
			}

			&.give_confirm {
				margin-left: 56rpx;
			}
		}
	}

	.app_popup {
		.app_pop_box {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			// background-color: #fff;
			width: 600rpx;
			height: 600rpx;
			border-radius: 10rpx;
			// padding: 20rpx 0;
			position: relative;

			.pop_bg {
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: -1;
			}

			.pop_version {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-top: 100rpx;
				margin-left: 60rpx;

				.pop_header {
					color: #fff;
				}

				.pop_content {
					// padding: 0 20rpx;
					margin-top: 120rpx;
				}
			}

			.rate {
				width: 550rpx;
				margin: 0 auto;
				align-items: center;
				display: flex;

				.rate_image {
					width: 500rpx;
					margin-right: 10rpx;
				}
			}

			.down_btn_group {
				display: flex;
				justify-content: space-around;
				align-items: center;

				.down_btn {
					width: 200rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					font-size: 24rpx;
					border-radius: 10rpx;

					&.cancel {
						background-color: #ccc;
						color: #999;
					}

					&.down {
						background-color: #a361f6;
						color: #fff;
					}
				}
			}
		}
	}
</style>